<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户邀请管理 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/invitation-customer-management.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">业务管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">邀约活动</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">客户邀请管理</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">8</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3 class="sidebar-title">客户管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="customer-list.html" class="menu-link">
                            <i class="fas fa-users"></i>
                            <span>客户档案</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-user-plus"></i>
                            <span>新增客户</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>标签管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3 class="sidebar-title">业务管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="invitation-management.html" class="menu-link">
                            <i class="fas fa-calendar-check"></i>
                            <span>邀约活动</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>线路产品</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">客户邀请管理</h1>
                <div class="activity-info">
                    <span class="activity-name">桂林山水3日游分享会</span>
                    <span class="activity-date">2025年7月25日 14:30-16:30</span>
                </div>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" onclick="goBackToActivity()">
                    <i class="fas fa-arrow-left"></i>
                    返回活动
                </button>
                <button class="btn btn-primary" id="batch-invite-btn">
                    <i class="fas fa-paper-plane"></i>
                    批量邀请
                </button>
            </div>
        </header>

        <!-- 邀请统计 -->
        <section class="invitation-stats-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon stat-primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">156</div>
                        <div class="stat-label">已邀请客户</div>
                        <div class="stat-detail">
                            <span class="stat-item">今日新增：12</span>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-success">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">98</div>
                        <div class="stat-label">已确认参加</div>
                        <div class="stat-detail">
                            <span class="stat-item">确认率：62.8%</span>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-warning">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">45</div>
                        <div class="stat-label">待回复</div>
                        <div class="stat-detail">
                            <span class="stat-item">需要跟进</span>
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-danger">
                        <i class="fas fa-user-times"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">13</div>
                        <div class="stat-label">已拒绝</div>
                        <div class="stat-detail">
                            <span class="stat-item">拒绝率：8.3%</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 客户筛选和邀请 -->
        <section class="customer-filter-section">
            <div class="section-header">
                <h2 class="section-title">智能客户筛选</h2>
                <p class="section-subtitle">根据活动特点智能筛选匹配的客户进行邀请</p>
            </div>

            <div class="filter-container">
                <div class="filter-groups">
                    <div class="filter-group">
                        <label class="filter-label">客户状态</label>
                        <div class="checkbox-group">
                            <label class="checkbox-item">
                                <input type="checkbox" value="有效客户" checked>
                                <span class="checkmark"></span>
                                <span>有效客户</span>
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" value="潜在客户" checked>
                                <span class="checkmark"></span>
                                <span>潜在客户</span>
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox" value="已成交客户">
                                <span class="checkmark"></span>
                                <span>已成交客户</span>
                            </label>
                        </div>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">年龄范围</label>
                        <div class="range-slider">
                            <input type="range" id="age-min" min="50" max="90" value="55" class="range-input">
                            <input type="range" id="age-max" min="50" max="90" value="75" class="range-input">
                            <div class="range-display">
                                <span id="age-range-display">55-75岁</span>
                            </div>
                        </div>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">客户标签</label>
                        <div class="tag-selector" id="tag-selector">
                            <div class="tag-item active" data-tag="VIP客户">
                                <span class="tag-name">VIP客户</span>
                                <span class="tag-count">28</span>
                            </div>
                            <div class="tag-item" data-tag="身体健康">
                                <span class="tag-name">身体健康</span>
                                <span class="tag-count">156</span>
                            </div>
                            <div class="tag-item active" data-tag="喜欢山水">
                                <span class="tag-name">喜欢山水</span>
                                <span class="tag-count">89</span>
                            </div>
                            <div class="tag-item" data-tag="优质客户">
                                <span class="tag-name">优质客户</span>
                                <span class="tag-count">67</span>
                            </div>
                            <div class="tag-item" data-tag="需要关怀">
                                <span class="tag-name">需要关怀</span>
                                <span class="tag-count">45</span>
                            </div>
                        </div>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">地域筛选</label>
                        <select class="filter-select" id="region-filter">
                            <option value="">全部地区</option>
                            <option value="本市">本市</option>
                            <option value="邻近城市">邻近城市</option>
                            <option value="省内">省内</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">预算范围</label>
                        <select class="filter-select" id="budget-filter">
                            <option value="">全部预算</option>
                            <option value="3000-5000">3000-5000元</option>
                            <option value="5000-8000">5000-8000元</option>
                            <option value="8000-12000">8000-12000元</option>
                            <option value="12000+">12000元以上</option>
                        </select>
                    </div>
                </div>

                <div class="filter-actions">
                    <button class="btn btn-outline" id="reset-filter-btn">
                        <i class="fas fa-undo"></i>
                        重置筛选
                    </button>
                    <button class="btn btn-primary" id="apply-filter-btn">
                        <i class="fas fa-search"></i>
                        应用筛选
                    </button>
                </div>

                <div class="filter-result">
                    <div class="result-summary">
                        <span class="result-text">筛选结果：</span>
                        <span class="result-count">89个匹配客户</span>
                        <span class="result-recommend">推荐邀请：<strong>45人</strong></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 邀请管理 -->
        <section class="invitation-management-section">
            <div class="section-header">
                <h2 class="section-title">邀请管理</h2>
                <div class="section-actions">
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="all">
                            <span>全部 (156)</span>
                        </button>
                        <button class="view-btn" data-view="pending">
                            <span>待回复 (45)</span>
                        </button>
                        <button class="view-btn" data-view="confirmed">
                            <span>已确认 (98)</span>
                        </button>
                        <button class="view-btn" data-view="rejected">
                            <span>已拒绝 (13)</span>
                        </button>
                    </div>
                    <button class="btn btn-outline" id="export-invitations-btn">
                        <i class="fas fa-download"></i>
                        导出邀请名单
                    </button>
                </div>
            </div>

            <div class="invitation-table-container">
                <table class="invitation-table">
                    <thead>
                        <tr>
                            <th>
                                <label class="checkbox-item">
                                    <input type="checkbox" id="select-all">
                                    <span class="checkmark"></span>
                                </label>
                            </th>
                            <th>客户信息</th>
                            <th>邀请方式</th>
                            <th>邀请时间</th>
                            <th>客户反馈</th>
                            <th>邀请状态</th>
                            <th>下次跟进</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="invitation-table-body">
                        <!-- 邀请记录行 -->
                        <tr class="invitation-row" data-customer-id="1" data-status="confirmed">
                            <td>
                                <label class="checkbox-item">
                                    <input type="checkbox" class="customer-checkbox" value="1">
                                    <span class="checkmark"></span>
                                </label>
                            </td>
                            <td class="customer-info">
                                <div class="customer-detail">
                                    <div class="customer-avatar">张</div>
                                    <div class="customer-data">
                                        <div class="customer-name">张大爷</div>
                                        <div class="customer-phone">138****8001</div>
                                        <div class="customer-tags">
                                            <span class="tag tag-vip">VIP客户</span>
                                            <span class="tag tag-health">身体健康</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="invitation-method">
                                <div class="method-list">
                                    <span class="method-item method-phone">
                                        <i class="fas fa-phone"></i>
                                        电话邀请
                                    </span>
                                    <span class="method-item method-wechat">
                                        <i class="fab fa-weixin"></i>
                                        微信确认
                                    </span>
                                </div>
                            </td>
                            <td class="invitation-time">
                                <div class="time-info">
                                    <div class="first-time">首次：07-18 09:30</div>
                                    <div class="last-time">最近：07-19 15:20</div>
                                </div>
                            </td>
                            <td class="customer-feedback">
                                <div class="feedback-content">
                                    "很感兴趣，会准时参加"
                                </div>
                            </td>
                            <td class="invitation-status">
                                <span class="status-badge status-confirmed">已确认</span>
                            </td>
                            <td class="follow-up">
                                <div class="follow-up-info">
                                    <div class="next-time">07-24 10:00</div>
                                    <div class="follow-method">活动提醒</div>
                                </div>
                            </td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewInvitationDetail(1)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="联系客户" onclick="contactCustomer(1)">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showInvitationActions(1)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="invitation-row" data-customer-id="2" data-status="pending">
                            <td>
                                <label class="checkbox-item">
                                    <input type="checkbox" class="customer-checkbox" value="2">
                                    <span class="checkmark"></span>
                                </label>
                            </td>
                            <td class="customer-info">
                                <div class="customer-detail">
                                    <div class="customer-avatar">李</div>
                                    <div class="customer-data">
                                        <div class="customer-name">李大妈</div>
                                        <div class="customer-phone">139****8002</div>
                                        <div class="customer-tags">
                                            <span class="tag tag-quality">优质客户</span>
                                            <span class="tag tag-careful">需要关怀</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="invitation-method">
                                <div class="method-list">
                                    <span class="method-item method-phone">
                                        <i class="fas fa-phone"></i>
                                        电话邀请
                                    </span>
                                </div>
                            </td>
                            <td class="invitation-time">
                                <div class="time-info">
                                    <div class="first-time">首次：07-19 14:15</div>
                                    <div class="last-time">最近：07-19 14:15</div>
                                </div>
                            </td>
                            <td class="customer-feedback">
                                <div class="feedback-content empty">
                                    暂无反馈
                                </div>
                            </td>
                            <td class="invitation-status">
                                <span class="status-badge status-pending">待回复</span>
                            </td>
                            <td class="follow-up">
                                <div class="follow-up-info urgent">
                                    <div class="next-time">07-21 09:00</div>
                                    <div class="follow-method">电话跟进</div>
                                </div>
                            </td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewInvitationDetail(2)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn primary" title="立即跟进" onclick="followUpCustomer(2)">
                                        <i class="fas fa-phone"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showInvitationActions(2)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="invitation-row" data-customer-id="3" data-status="rejected">
                            <td>
                                <label class="checkbox-item">
                                    <input type="checkbox" class="customer-checkbox" value="3">
                                    <span class="checkmark"></span>
                                </label>
                            </td>
                            <td class="customer-info">
                                <div class="customer-detail">
                                    <div class="customer-avatar">王</div>
                                    <div class="customer-data">
                                        <div class="customer-name">王先生</div>
                                        <div class="customer-phone">137****8003</div>
                                        <div class="customer-tags">
                                            <span class="tag tag-normal">普通客户</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="invitation-method">
                                <div class="method-list">
                                    <span class="method-item method-sms">
                                        <i class="fas fa-comment"></i>
                                        短信邀请
                                    </span>
                                </div>
                            </td>
                            <td class="invitation-time">
                                <div class="time-info">
                                    <div class="first-time">首次：07-18 16:45</div>
                                    <div class="last-time">最近：07-18 16:45</div>
                                </div>
                            </td>
                            <td class="customer-feedback">
                                <div class="feedback-content">
                                    "最近身体不太好，不参加了"
                                </div>
                            </td>
                            <td class="invitation-status">
                                <span class="status-badge status-rejected">已拒绝</span>
                            </td>
                            <td class="follow-up">
                                <div class="follow-up-info">
                                    <div class="next-time">-</div>
                                    <div class="follow-method">无需跟进</div>
                                </div>
                            </td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewInvitationDetail(3)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="关怀客户" onclick="careCustomer(3)">
                                        <i class="fas fa-heart"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showInvitationActions(3)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 批量操作栏 -->
            <div class="batch-actions-bar" id="batch-actions-bar" style="display: none;">
                <div class="selected-info">
                    <span>已选择 <span id="selected-count">0</span> 个客户</span>
                </div>
                <div class="batch-buttons">
                    <button class="btn btn-outline" onclick="batchInvite()">
                        <i class="fas fa-paper-plane"></i>
                        批量邀请
                    </button>
                    <button class="btn btn-outline" onclick="batchFollowUp()">
                        <i class="fas fa-phone"></i>
                        批量跟进
                    </button>
                    <button class="btn btn-outline" onclick="batchExport()">
                        <i class="fas fa-download"></i>
                        导出选中
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框：邀请设置 -->
    <div class="modal-overlay" id="invitation-modal">
        <div class="modal large">
            <div class="modal-header">
                <h3 class="modal-title">邀请设置</h3>
                <button class="modal-close" onclick="closeInvitationModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="invitation-setup">
                    <div class="setup-section">
                        <h4 class="setup-title">邀请方式</h4>
                        <div class="method-options">
                            <label class="method-option">
                                <input type="checkbox" value="phone" checked>
                                <div class="option-content">
                                    <i class="fas fa-phone"></i>
                                    <span class="option-name">电话邀请</span>
                                    <span class="option-desc">直接电话联系，效果最好</span>
                                </div>
                            </label>
                            <label class="method-option">
                                <input type="checkbox" value="sms">
                                <div class="option-content">
                                    <i class="fas fa-comment"></i>
                                    <span class="option-name">短信邀请</span>
                                    <span class="option-desc">发送邀请短信，覆盖面广</span>
                                </div>
                            </label>
                            <label class="method-option">
                                <input type="checkbox" value="wechat">
                                <div class="option-content">
                                    <i class="fab fa-weixin"></i>
                                    <span class="option-name">微信邀请</span>
                                    <span class="option-desc">微信个人或群发消息</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <div class="setup-section">
                        <h4 class="setup-title">邀请模板</h4>
                        <div class="template-selector">
                            <select class="form-select" id="invitation-template">
                                <option value="standard">标准邀请模板</option>
                                <option value="vip">VIP客户专用模板</option>
                                <option value="personal">个性化模板</option>
                                <option value="urgent">紧急邀请模板</option>
                            </select>
                        </div>
                        <div class="template-preview">
                            <label class="form-label">模板内容预览</label>
                            <textarea class="form-textarea" id="template-content" rows="6" readonly>
尊敬的客户，您好！

我们将于7月25日下午2:30在市民文化中心举办"桂林山水3日游分享会"，特邀请您参加。

活动亮点：
- 专业导游现场分享桂林精华景点
- 独家线路优惠政策
- 精美伴手礼

期待您的光临！

报名确认请回复，谢谢！
                            </textarea>
                        </div>
                    </div>

                    <div class="setup-section">
                        <h4 class="setup-title">跟进计划</h4>
                        <div class="followup-settings">
                            <div class="form-group">
                                <label class="form-label">首次跟进时间</label>
                                <select class="form-select" id="first-followup">
                                    <option value="2">邀请后2小时</option>
                                    <option value="6">邀请后6小时</option>
                                    <option value="12">邀请后12小时</option>
                                    <option value="24" selected>邀请后1天</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">跟进方式</label>
                                <select class="form-select" id="followup-method">
                                    <option value="phone">电话跟进</option>
                                    <option value="wechat">微信跟进</option>
                                    <option value="sms">短信跟进</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeInvitationModal()">取消</button>
                <button class="btn btn-primary" onclick="confirmInvitation()">确认邀请</button>
            </div>
        </div>
    </div>

    <!-- 模态框：邀请详情 -->
    <div class="modal-overlay" id="invitation-detail-modal">
        <div class="modal medium">
            <div class="modal-header">
                <h3 class="modal-title">邀请详情</h3>
                <button class="modal-close" onclick="closeInvitationDetailModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="invitation-detail" id="invitation-detail-content">
                    <!-- 详情内容将在这里动态生成 -->
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="editInvitation()">编辑邀请</button>
                <button class="btn btn-primary" onclick="addFollowUp()">添加跟进</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/invitation-customer-management.js"></script>
</body>
</html>